<template>
<view class="container">
  <view class="goodsname">
    <image class="goodsimg" :src="data.good.original_img"></image>
    <text>{{data.good.goods_name}}</text>
    <image class="jiantou" src="/static/images/yr.png"></image>
  </view>
  <view class="content">
   <block v-for="(item, index) in asklist" :key="index">
      <view class="question">
        <view>
          <text class="title">问</text>{{item.question.content}}
        </view>
        <text class="time">提问于 {{ask.addTimeFormat}} </text>
      </view>
       <block v-for="(items, index2) in item.comment" :key="index2">
          <view class="asklist">
            <view class="top">
            <!-- src='{{userInfo.head_pic?userInfo.head_pic:defaultAvatar}}' -->
              <!-- <image class="headimg" src="http://demo5.tp-shop.cn/public/upload/goods/thumb/312/goods_thumb_312_0_300_300.jpeg"></image> -->
              <image class="headimg" :src="data.user[items.user_id]['head_pic']"></image>
              <view class="right">
                <view>{{data.user[items.user_id]['nickname']}}</view>
                <text>{{items.time}}</text>
              </view>
            </view>
            <view class="askcontent">{{items.content}}</view>
          </view>
        </block>
    </block>
  </view>
  
  <view class="bottom">
    <textarea placeholder-class="center" :value="content" @input="bindEquipmentId" placeholder-style="line-height:50rpx;" placeholder="请输入您的评论"></textarea>
    <view @tap="a">发送</view>
  </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      data: "",
      //请求的数据
      asklist: [],
      ask: null,
      good_id: "",
      //评论商品id
      qid: '',
      //问题id
      content: "" //评论内容  

    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this; // 问答请求

    request.get('/api/user/ask_all', {
      data: {
        id: options.goods_id,
        qid: options.qid
      },
      failRollback: true,
      isShowLoading: false,
      success: function (res) {
        // 时间转换
        // 提问时间
        var ask = res.data.result[0].question;
        ask.addTimeFormat = util.format(ask.createtime, 'yyyy-MM-dd hh:mm'); // 回答时间

        var result = res.data.result;

        for (var i in result) {
          for (var j in result[i].comment) {
            result[i].comment[j].time = util.format(result[i].comment[j].createtime, 'yyyy-MM-dd hh:mm');
          }
        }

        that.setData({
          ask: ask
        }); // 用户头像

        var setting = app.globalData.setting;

        for (var i in res.data.user) {
          if (res.data.user[i].head_pic) {
            if (res.data.user[i].head_pic.indexOf("http") == -1) {
              res.data.user[i].head_pic = setting.url + res.data.user[i].head_pic;
            }
          } else {
            res.data.user[i].head_pic = setting.url + "/static/template/mobile/rainbow/static/images/user68.jpg";
          }
        }

        that.setData({
          asklist: res.data.result,
          data: res.data,
          good_id: options.goods_id,
          qid: options.qid
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // textarea值
    bindEquipmentId: function (e) {
      this.setData({
        content: e.detail.value
      });
    },
    // 评论
    a: function () {
      var that = this;

      if (!that.content) {
        app.globalData.showTextWarining("请输入提问标题");
        return false;
      }

      request.get('/api/user/askall_answer', {
        data: {
          qid: that.qid,
          id: that.goods_id,
          content: that.content
        },
        failRollback: true,
        isShowLoading: false,
        success: function (res) {
          app.globalData.showTextWarining("恭喜您，评论成功!");
          that.setData({
            content: ""
          });
        }
      });
    }
  }
};
</script>
<style>
.container{
  padding-top: 100rpx;
  padding-bottom: 100rpx;
}
.goodsname{
  font-size: 30rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  height: 100rpx;
  position: fixed;
  width: 690rpx;
  top: 0;
  padding: 0 30rpx;
}
.goodsname .goodsimg{
  width: 60rpx;
  height: 60rpx;
}
.goodsname .jiantou{
  width: 16rpx;
  height: 28rpx;
}
.goodsname text{
  width: 570rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content{
  width: 650rpx;
  margin: 30rpx;
  border-radius: 10rpx;
  padding: 30rpx 20rpx 0;
  background: #fff;
  font-size: 30rpx;
}
.content .title{
  background: #FE9355;
  color:#fff;
  font-size: 28rpx;
  padding: 2rpx;
  margin-right: 10rpx;
}
.content .time{
  color: #999;
  font-size: 24rpx;
  padding: 15px 0;
  display: inline-block;
}
.asklist{
  width: 600rpx;
  margin-left: -30rpx;
  padding: 30rpx;
  border-top: 2rpx solid #f3f3f3;
}
.asklist .top{
  display: flex;
}
.asklist .askcontent{
  width: 540rpx;
  margin-left: 90rpx;
  margin-top: 24rpx;
  font-size: 28rpx;
  color: #333;
  overflow: hidden;
}
.asklist .headimg{
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
.asklist .right{
  margin-left: 24rpx;
} 
.asklist .right text{
  color: #999;
  font-size: 24rpx;
  margin-top: 8rpx;
  display: inline-block;
}
.bottom{
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 100rpx;
  border-top:2rpx solid #f3f3f3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  padding: 0 6rpx;
}
.bottom textarea{
  background: #F4F4F4;
  border-radius: 40rpx;
  padding: 6rpx;
  padding-top: 18rpx;
  height: 36rpx;
  font-size: 24rpx;
  width: 490rpx;
  padding-left: 30rpx;
}
.bottom view{
  width: 130rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  color: #fff;
  background: #FEC52B;
  border-radius: 40rpx;
  font-size: 30rpx;
  margin-right: 10rpx;
}
.bottom .center{
  text-align: center;
}
</style>